<script setup>

import { reactive,ref,onUpdated,nextTick,computed,watch } from 'vue'
import store from '../store';
import router from '../router';

// 输入框标题位置
const labelPosition = ref('top')
// 当前登录方式
let loginIn = ref('true')
const radio = ref('手机验证登录')
// 切换登录方式
function setLogin(val){
    loginIn.value = val
}

// 用户输入信息
const stateInfo = reactive({
      username: "",
      password: "",
      phoneNum: "",
      checkCode: "",
      checkText:"获取验证码",
      checkTime:'',
      show: false,
})

// 登录校验
function checkPhone(){
  // 手机登录
  if(loginIn.value){
    if(stateInfo.phoneNum === '' && stateInfo.checkCode === '' ){
      ElMessage.error('手机或验证码不能为空！')
    }
    else if(stateInfo.phoneNum.length !== 11){
      ElMessage.error('请输入正确的手机号！')
    }
    else if(stateInfo.checkCode !== '123456'){
      ElMessage.error('验证码有误！')
    }
    else{
      loginFlag()
    }
  }
  else{
    console.log(stateInfo.password === '');
    if(stateInfo.username === '' || stateInfo.password === ''){
      ElMessage.error('用户或密码不能为空！')
    }
    else{
      loginFlag()
    }
  }
}
// 获取验证码
function getCode(){
   if(stateInfo.phoneNum === '' && stateInfo.checkCode === '' ){
      ElMessage.error('手机号不能为空！')
    }
    else if(stateInfo.phoneNum.length !== 11){
      ElMessage.error('请输入正确的手机号！')
    }else{
      stateInfo.checkTime = 60
      stateInfo.checkText = "秒可重发"
      let setTime = setInterval(function(){
        stateInfo.checkTime --
        if(stateInfo.checkTime===55){
        clearInterval(setTime)
        stateInfo.checkTime = ''
        stateInfo.checkText = "重新获取"
        }
      },1000)
      
      setTimeout(function(){
        alert(`'你的验证码是123456'`)
      },1500)
    }
  
}
// 登录状态
function loginFlag () {
  ElMessage({
        message: '登录成功',
        type: 'success',
      })
    window.sessionStorage.setItem("logStatus", "true");
    // 获取目标路径
    let toPath_value = store.toPath.value
    // 获取原路径
    let fromPath_value = store.fromPath.value
    // 只保留原路径字母，用于判断是否从详情页跳转过来
    if(toPath_value === '' || fromPath_value.toString().replace(/[^a-zA-Z]/g, "") === 'details'){
      router.push(store.fromPath.value)
    }else{
      // if()
      router.push(store.toPath.value)
    }
    // console.log(store.fromPath); string.replace(/[^a-zA-Z]/g, "");
    
}


// 图片序号
const flag = ref(1)
// 获取图片地址
let imageUrl = ref(`url(/src/assets/login/bg${flag.value}.png)`)
// 修改背景颜色
let backColor = ref('rgb(248, 182, 217)')
// 监视图片序号的变化
watch(flag,async (newQuestion, oldQuestion) => {
  imageUrl.value = `url(/src/assets/login/bg${newQuestion}.png)`
  if(newQuestion % 2 !== 0 ){
    backColor.value = 'rgb(248, 182, 217)'
  }else{
    backColor.value = 'rgb(182, 211, 248)'
  }
}) 

// 定时切换图片
setInterval(function() {
        flag.value += 1
        if(flag.value === 5){
          flag.value = 1
        }
			}, 3000);
 
</script>

<template>
   <div class="box">
    <div class="content" >
            <div class="login-wrapper">
                <div class="mask"></div>
                <div class="login-content">
                    <h1>登 录</h1>
                    <div class="title-text">
                        欢迎来到简约博客
                    </div>
                    <div class="other-login">
                      <el-radio-group v-model="radio" size="large" >
                        <el-radio-button @click="setLogin(true)"  label="手机验证登录" />
                        <el-radio-button @click="setLogin(false)" label="用户密码登录" />
                      </el-radio-group>
                    </div>
                    <!-- 手机号验证登录 -->
                    <div class="login-form" v-show="loginIn">
                      <el-input  v-model="stateInfo.phoneNum" class="user" placeholder="手机号" clearable />
                      <el-input
                        v-model="stateInfo.checkCode"
                        placeholder="6位验证码"
                        maxlength="6"
                        clearable
                      />
                      <button class="getCode" @click="getCode()"> {{stateInfo.checkTime + stateInfo.checkText}}</button>
                        <button class="login-btn" @click="checkPhone()">登 录/注 册</button>
                    </div>
                    <!-- 密码登录 -->
                    <div class="login-form" v-show="!loginIn">
                      <el-input v-model="stateInfo.username" class="user" placeholder="账号" clearable />
                      <el-input
                        v-model="stateInfo.password"
                        type="password"
                        placeholder="密码"
                        show-password
                        clearable
                      />
                        <button @click="checkPhone()" class="login-btn">登 录</button>
                    </div>
                    <div class="tips">
                        <span>还没有账号?</span>
                        <span>注册</span>
                    </div>
                </div>
            </div>
        </div>
   </div>
</template>

<style lang="less" scoped>
 
  .box {
    // background-color: #fff;
    width: 100vw;
    height: 100vh;
    .content {
        width: 85vw;
        height: 90vh;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 20px;
        // background: url(../assets/login/bg4.png) no-repeat;
        background: v-bind('imageUrl') no-repeat;
        background-size: cover;
        object-fit: cover;
        transition: 0.5s;
        .login-wrapper {
            width: 500px;
            height: 100%;
            position: absolute;
            right: 0;
            box-sizing: border-box;
            .mask {
                position: absolute;
                right: 0;
                width: 80%;
                height: 100%;
                border-top-right-radius: 20px;
                border-bottom-right-radius: 20px;
                background: rgba(255, 255, 255, 0.7);
                // box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.27);
                backdrop-filter: blur(15.5px);
            }
            .login-content {
                width: 64%;
                position: absolute;
                top: 50%;
                left: 60%;
                transform: translate(-50%, -50%);
                z-index: 10;
                h1 {
                    font-size: 36px;
                    margin-bottom: 10px;
                }
                .title-text {
                    color: rgb(65, 63, 63);
                    margin-bottom: 50px;
                }
                .other-login {
                    width: 100%;
                    background-color: v-bind('backColor');
                    border-radius: 5px;
                    transition: 1s;
                    text-align: center;
                    line-height: 50px;
                    font-weight: 600;
                    font-size: 20px;
                    margin-bottom: 20px;
                    color: rgb(41, 41, 41);
                    cursor: pointer;
                    img {
                        width: 35px;
                        height: 35px;
                        vertical-align: middle;
                  }
                }
                .getCode{
                  position: absolute;
                  bottom: 112px;
                  right: 8px;
                  cursor: pointer;
                  border: none;
                  background-color: rgba(255, 255, 255, 0);
                  color:rgb(97, 161, 140);
                }
                .login-form {
                    margin-top: 40px;
                    
                }
                .login-btn {
                    width: 100%;
                    height: 40px;
                    margin-top: 25px;
                    border-radius: 5px;
                    border: 0;
                    background-color: rgb(54, 59, 197);
                    color: #fff;
                    font-size: 18px;
                    font-weight: 600;
                    cursor: pointer;
                }
                .tips {
                    margin: 5px 0;
                    font-size: 12px;
                    color: rgb(150, 152, 160);
                    span:nth-child(2) {
                      cursor: pointer;
                        color: rgb(54, 59, 197);
                        font-weight: 600;
                    }
                }
            }
        }
    }
}
</style>

<style lang="less">
.login-wrapper{
  .el-input__inner {
    width: 100%;
    height: 20px;
    margin: 10px 0;
    border-radius: 5px;
    border: 0;
    box-sizing: border-box;
    font-weight: 100;
    font-size: 16px;
    &:focus {
        outline: none;
    }
    &::placeholder {
      font-size: 16px;
        font-weight: 500;
        color: #D0D0D0;
    }
}
.el-input{
      margin-bottom: 10px ;
    }
.el-radio-group{
      display: flex;
      padding: 0 20px;
      justify-content: space-between;
      border: none;
    }
.el-radio-button__original-radio:checked+.el-radio-button__inner{
  background-color: rgba(0, 0, 0, 0);
  color: #000;
  border: none;
  border-radius: 10px;
  box-shadow: 2px 4px 10px #f9f9f9,-.2em 0 .4em #f9f9f9 !important;
}

.el-radio-button__inner{

  background-color: rgba(0, 0, 0, 0);
  font-weight: bold;
  color: #fff;
  border: none;
  /* box-shadow: 10px 5px 5px red; */
}
.el-radio-button__inner:hover{
  color: #000;
}

.el-radio-button:first-child .el-radio-button__inner{
  border: none;
}

}
</style>
